<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>乐器销售后台管理系统</title>
    <meta name="author" content="DeathGhost" />
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" href="css/bootstrap.css">
    <!--[if lt IE 9]>
    <script src="js/html5.js"></script>
    <![endif]-->
    <script src="js/jquery.js"></script>
    <script src="js/jquery.mCustomScrollbar.concat.min.js"></script>
    <script>
        (function ($) {
            $(window).load(function () {

                $("a[rel='load-content']").click(function (e) {
                    e.preventDefault();
                    var url = $(this).attr("href");
                    $.get(url, function (data) {
                        $(".content .mCSB_container").append(data); //load new content inside .mCSB_container
                        //scroll-to appended content
                        $(".content").mCustomScrollbar("scrollTo", "h2:last");
                    });
                });

                $(".content").delegate("a[href='top']", "click", function (e) {
                    e.preventDefault();
                    $(".content").mCustomScrollbar("scrollTo", $(this).attr("href"));
                });

            });
        })(jQuery);
    </script>
</head>
<body>
<!--header-->
<header>
    <h1><img src="images/admin_logo.png"/></h1>
    <ul class="rt_nav">
        <li><a href="index.html" target="_blank" class="website_icon">站点首页</a></li>
        <li><a href="user_detail.html" class="admin_icon">用户</a></li>
        <li><a href="login.html" class="quit_icon">安全退出</a></li>
    </ul>
</header>
<!--aside nav-->
<!--aside nav-->
<aside class="lt_aside_nav content mCustomScrollbar">
    <h2><a href="index.html">起始页</a></h2>
    <ul>
        <li>
            <dl>
                <dt>商品信息</dt>
                <!--当前链接则添加class:active-->
                <dd><a href="product_list.html" class="active">商品列表</a></dd>
                <dd><a href="product_detail.html">商品详情</a></dd>
            </dl>
        </li>
        <li>
            <dl>
                <dt>订单信息</dt>
                <dd><a href="order_list.html">订单列表</a></dd>
                <dd><a href="order_detail.html">订单详情</a></dd>
            </dl>
        </li>
        <li>
            <dl>
                <dt>会员管理</dt>
                <dd><a href="user_list.html">会员列表</a></dd>
                <dd><a href="user_detail.html">添加会员（详情）</a></dd>
                <dd><a href="user_rank.html">会员等级</a></dd>
                <dd><a href="adjust_funding.html">会员资金管理</a></dd>
            </dl>
        </li>
        <li>
            <dl>
                <dt>配送设置</dt>
                <dd><a href="express_list.html">配送方式</a></dd>
            </dl>
        </li>
        <li>
            <dl>
                <dt>在线统计</dt>
                <dd><a href="discharge_statistic.html">流量统计</a></dd>
                <dd><a href="sales_volume.html">销售额统计</a></dd>
            </dl>
        </li>
    </ul>
</aside>

<section class="rt_wrap content mCustomScrollbar">
    <div class="rt_content">
        <div class="page_title">
            <h2 class="fl">订单详情</h2>
      <a href="product_list.html" class="fr top_rt_btn">返回订单列表</a>
        </div>
        <table class="table">
       <tr>
        <td>收件人：DeathGhost</td>
        <td>联系电话：18300000000</td>
        <td>收件地址：陕西省西安市雁塔区丈八路2000集都市印象18栋2160室</td>
        <td>配送方式：顺丰</td>
       </tr>
       <tr>
        <td>下单时间：2016-02-01 13:56</td>
        <td>付款时间：2016-02-01 13:56</td>
        <td>确认时间：2016-02-01 13:56</td>
        <td>评价时间：2016-02-01 13:56</td>
       </tr>
       <tr>
        <td>订单状态：<a>已付款，待发货</a></td>
        <td colspan="3">订单备注：<mark>帮我检查好呀~谢谢~</mark></td>
        </tr>
      </table>
      <table class="table">
     <tr>
        <td class="center">图片</td>
        <td class="center">产品名称</td>
        <td class="center">型号</td>
        <td class="center">单价</td>
        <td class="center">数量</td>
        <td class="center"><strong>总价</strong></td>
        <td class="center">是否包邮</td>
       </tr>
       <tr>
        <td class="center"><img src="upload/卢森吉他1.gif" width="50" height="50"/></td>
        <td class="center">卢森吉他</td>
        <td class="center">R-135</td>
    <td class="center"><strong class="rmb_icon">500</strong></td>
        <td class="center"><strong>2</strong></td>
        <td class="center"><strong class="rmb_icon">1000</strong></td>
        <td class="center">包</td>
       </tr>
       <tr>
        <td class="center"><img src="upload/雅马哈钢琴1.jpg" width="50" height="50"/></td>
        <td class="center">雅马哈钢琴</td>
        <td class="center">YDP103R</td>
        <td class="center"><strong class="rmb_icon">9999</strong></td>
        <td class="center"><strong>1</strong></td>
        <td class="center"><strong class="rmb_icon">9999</strong></td>
        <td class="center">包</td>
       </tr>
      </table>
  
      <aside class="mtb" style="text-align:right;">
          <input type="button" value="打印订单" class="group_btn"/>
        <button class="group_btn" id="modifyOrder">修改订单</button>
          <a href="order_list.html"><input type="button" value="确认订单" class="group_btn"/></a>   
        <input type="button" value="取消订单" class="group_btn"/>
      <button class="group_btn" id="showPopTxt">配货</button>
      </aside>
   
    <!--配货弹出框！-->
      <script>
      $(document).ready(function(){
     //弹出文本性提示框
      $("#showPopTxt").click(function(){
        $(".pop_bg").fadeIn();
        });
     //弹出：确认按钮
      $(".trueBtn1").click(function(){
        alert("你点击了确认！");//测试
        $(".pop_bg").fadeOut();
        });
     //弹出：取消或关闭按钮
      $(".falseBtn1").click(function(){
        alert("你点击了取消/关闭！");//测试
        $(".pop_bg").fadeOut();
        });
      });
      </script>
  
      <section class="pop_bg">
       <div class="pop_cont">
        <!--title-->
        <h3>配货信息</h3>
        <!--content-->
        <div class="pop_cont_input">
         <ul>
          <li>
           <span>订单编号</span>
       <input type="text" class="textbox"/>
          </li>
          <li>
           <span class="ttl">产品信息</span>
           <select class="select">
            <option>选择乐器类型</option>
           </select>
           <select class="select">
            <option>选择乐器品牌</option>
           </select>
           <select class="select">
            <option>选择乐器型号</option>
           </select>
          </li>
          <li>
           <span class="ttl">交易数量</span>
           <select class="select">
            <option>库存剩余3件</option>
      <option>3</option>
      <option>2</option>
      <option>1</option>
           </select>
          </li>
         </ul>
        </div>
        <!--以pop_cont_text分界-->
        <div class="pop_cont_text">
         请确认配货信息！
        </div>
        <!--bottom:operate->button-->
        <div class="btm_btn">
         <input type="button" value="确认" class="input_btn trueBtn1"/>
         <input type="button" value="关闭" class="input_btn falseBtn1"/>
        </div>
       </div>
      </section>
      <!--结束：弹出框效果-->
    
  
    <!--修改订单弹出框-->
    <script>
      $(document).ready(function(){
     //弹出文本性提示框
      $("#modifyOrder").click(function(){
        $(".pop_mo").fadeIn();
        });
     //弹出：取消或关闭按钮
      $(".falseBtn2").click(function(){
        alert("你点击了退出！");//测试
        $(".pop_mo").fadeOut();
        });
    });
    </script>   
    
    <section class="pop_mo" id="mo">
          <div class="pop_cont">
        <!--title-->
              <h3>订单信息</h3>
        <!--content-->
              <div class="pop_cont_input">
              <ul>
              <li>
                  <span>商品名称</span>
              <input type="text" class="textbox" name="name" required="required" value="卢森吉他" />
              </li>
              <li>
                  <span>商品型号</span>
              <input type="text" class="textbox" name="name" required="required" value="asdasd" />
              </li>
        <li>
                  <span>数量</span>
              <input type="text" class="textbox" name="name" required="required" value="2" />
              </li>
        <li>
                  <span>价格</span>
              <input type="text" class="textbox" name="name" required="required" value="1000" />
              </li>
        <li>
                  <span>收件人</span>
              <input type="text" class="textbox" name="name" required="required" value="DeathGhost" />
              </li>
        <li>
                  <span>联系电话</span>
              <input type="text" class="textbox" name="name" required="required" value="13000000000" />
              </li>
        <li>
                  <span>收件地址</span>
              <input type="text" class="textbox" name="name" required="required" value="陕西省西安市雁塔区丈八路2000集都市印象18栋2160室" />
              </li>
              <li>
                  <span class="ttl">配送方式</span>
          <select class="select">
                      <option>选择物流公司</option>
                      <option value="顺丰">顺丰</option>
                      <option value="中通">中通</option>
            <option value="其他">其他</option>
                  </select>
        </li>
             </ul>
      </div>
        <!--bottom:operate->button-->
    <div class="mo_btn">
      <button type="button" class="link_btn" onclick="modify()">修改</button>
            <button type="button" class="link_btn falseBtn2">退出</button>
        <button type="submit" class="link_btn" onclick="read()">确认</button>
        </div>
       </div>
      </section>
      <!--结束：弹出框效果-->
         
    </div>
</section>
 <script type="text/javascript">
          jQuery(document).ready(read());
      function read(){
      $("#mo input").attr("disabled", "disabled");
          $("#mo select").attr("disabled", "disabled");
    }
      function modify() {
          $("#mo input").removeAttr("disabled");
          $("#mo select").removeAttr("disabled");
        // $(".hide").removeClass("hide")
      }
 </script>  



</body>
</html>
